<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>图书管理</el-breadcrumb-item>
      <el-breadcrumb-item>图书列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输图书名称" clearable @clear="search" v-model="bname" >
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addBookFormVisible=true">添加图书</el-button>
        </el-col>
      </el-row>

      <el-table :data="bookList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="图书名称" prop="name"></el-table-column>
        <el-table-column label="图书图片">
          <template slot-scope="scope">
            <img :src="scope.row.imgsrc" style="width: 30px;height: 30px;border-radius: 50%" />
          </template>
        </el-table-column>
        <el-table-column label="图书类型" prop="typeName"></el-table-column>
        <el-table-column label="作者" prop="author"></el-table-column>
        <el-table-column label="出版社" prop="provider"></el-table-column>
        <el-table-column label="价格" prop="price" width="80"></el-table-column>
        <el-table-column label="库存" prop="storecount" width="80"></el-table-column>
        <el-table-column label="销量" prop="buycount" width="80"></el-table-column>

        <el-table-column label="状态">
          <template slot-scope="scope">
            {{scope.row.state == '2'?'上架中':'已下架'}}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini">修改</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6, 12, 24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    </el-card>

    <!--添加图书 -->
    <el-dialog title="添加图书" :visible.sync="addBookFormVisible" @close="closeAddBookForm" :close-on-click-modal="false">
      <el-form ref="addBookForm" :rules="addBookRules" :model="addBookModel" label-width="150px" size="mini">
        <el-form-item label="图书名称" prop="name">
          <el-input v-model="addBookModel.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="addBookModel.author"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="provider">
          <el-input v-model="addBookModel.provider"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="addBookModel.price"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="storecount">
          <el-input v-model="addBookModel.storecount"></el-input>
        </el-form-item>

        <el-form-item label="图书类型" prop="typeId">
          <el-select v-model="addBookModel.typeId" placeholder="请选图书类型">
            <el-option v-for="t in typeList" :label="t.name" :value="t.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="上传图片" prop="imgsrc">
          <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="headers"
              name="uploadImg">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="详情">
          <el-input type="textarea" v-model="addBookModel.detail"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button  @click="closeAddBookForm">取 消</el-button>
        <el-button type="primary" @click="addBook">确 定</el-button>
      </div>
    </el-dialog>
    =========={{headers}}=========
  </div>
</template>

<script>
export default {
  name: "Book",
  data(){
    return {
      addBookFormVisible:false,
      bname:'',
      bookList:[],
      typeList:[],
      pageNum:1,
      pageSize:3,
      total:0,
      addBookModel:{
        name:'',
        author:'',
        provider:'',
        price:0.0,
        storecount:0,
        typeId:0,
        imgsrc:'',
        detail:''
      },
      addBookRules:{

      },
      uploadUrl:'http://localhost:9002/book/uploadImg',
      imageUrl: '',
      headers:{token:sessionStorage.getItem("token")}
    }
  },
  methods:{
    handleAvatarSuccess(res, file) {
      console.log(res,file)
      this.imageUrl = URL.createObjectURL(file.raw);
      //把返回图片地址 存储到 addBookModel对象上
      this.addBookModel.imgsrc = res.data ;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //保存添加
    addBook(){
      this.$axios.post("book/addBook",this.addBookModel)
      .then((data)=>{
        if (data.data.code == 200){
          this.addBookFormVisible = false ;
          this.$refs.addBookForm.resetFields();
          this.searchBook();
        }else {
          this.$message({
            message:data.data.msg ,
            type:'error',
            duration:1000
          })
        }
      })
    },
    //关闭添加对话框
    closeAddBookForm(){
      this.addBookFormVisible = false ;
      this.$refs.addBookForm.resetFields();
    },
    search(){
      this.pageNum =1 ;
      this.searchBook();
    },
    handleSizeChange(szie) {
      this.pageNum =1 ;
      this.pageSize = szie ;
      this.searchBook();
    },
    handleCurrentChange(now){
      this.pageNum = now ;
      this.searchBook();
    },
    searchBook(){
      this.$axios.get("book/blist",{
        params:{
          now:this.pageNum,
          size:this.pageSize,
          bname:this.bname
        }
      }).then((data)=>{
        if(data.data.code == 200){
          this.bookList = data.data.data.records;
          this.pageNum = data.data.data.current;
          this.pageSize = data.data.data.size;
          this.total = data.data.data.total;
        }else {
          this.$message({
            message:data.data.msg ,
            type:'error',
            duration:1000
          })
        }
      })
    },
    initTypeList(){
      this.$axios.get("booktype/typeList")
      .then((data)=>{
        if (data.data.code == 200) {
          this.typeList = data.data.data ;
        }else {
          this.$message({
            message:data.data.msg ,
            type:'error',
            duration:1000
          })
        }
      })
    }
  },
  created() {
    this.searchBook();
    this.initTypeList();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style scoped>

</style>